/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

package cube;

import javafx.scene.CustomNode;
import javafx.scene.Node;
import javafx.scene.paint.Color;
import javafx.animation.Timeline;
import javafx.animation.Interpolator;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.input.MouseEvent;
import javafx.scene.Group;

/**
 * @author charmgil
 */

// Tkaen from a code of Raghu Nair
public class TooltipNode extends CustomNode{


    /* Source node where you want to show the tool tip */
    public-init var sourceNode:Node;

    /* Tool tip text */
    //public-init var tooltip:String;
    public var tooltip:String;

    /* Width */
    public-init var width :Integer = bind ( tooltip.length() * 4.4 + 14 ) as Integer;

    var x = Layout.offsetX;
    var y = Layout.offsetY;

    var glowColor = Color.TRANSPARENT;
    override var opacity = 0.0;
    def showTip:Timeline = Timeline {
        keyFrames: [
            at (0s) {
                glowColor => Color.TRANSPARENT;
                opacity => 0.0;
            },
            at (1s) {
                glowColor =>Color.color(0.5, 0.5, 0.5, 0.5);
                opacity => 1.0 tween Interpolator.EASEBOTH;
            },
        ]
    }

    var rectangle:Rectangle = Rectangle{
        //translateX: bind ( sourceNode.translateX+(sourceNode.layoutBounds.width - rectangle.layoutBounds.width )/2)
        //translateY: bind (( sourceNode.layoutBounds.height/2) + 45);
        x: bind x - 5
        y: bind y

        fill:Color.YELLOW
        width: bind text.layoutBounds.width + 10
        height:20
        stroke: Color.BLACK
        strokeWidth: 0.25
    }

    var text:Text = Text {
        //translateX: bind (rectangle.translateX )
        //translateY: bind rectangle.translateY+(rectangle.layoutBounds.height / 2) + 3

        x: bind x
        y: bind y + ( rectangle.layoutBounds.height / 2 ) + 3

        font: Font {
            size: 11
        }
        fill: Color.BLACK
        content: bind tooltip
    }

    override function create():Node {
        sourceNode.onMouseEntered = function(e:MouseEvent){
            x = e.x;
            y = e.y - 20;

            if( tooltip == "" or tooltip == null )
                return;
                
            sourceNode.opacity = 1.0;
            showTip.rate = 1.0;
            showTip.playFromStart();
        }
        sourceNode.onMouseExited =  function(e:MouseEvent){
            
            sourceNode.opacity = 0.7;
            showTip.rate = -1.0;
            opacity = 0.0;
        }
        Group{
            content: [rectangle,text]
       }

    }
}